@CHARSET "UTF-8";
@font-face {
    font-family: bulgariaModerna2;
    src: url(fonts/Bulgaria_Moderna_Pro.otf);
}
body {
        font-family: bulgariaModerna2;
         background: url(../images/background.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        padding: 0px;
        margin: 0px;
        /* padding: 50px;
        padding-top:3px; */
}

#header {
        margin-top:0px;
        padding-top: 0px;
        width: 40%;
        float: right;
        height: 80px;
        text-align: center;
        margin-bottom: 2px;
        margin-right: 10px;
        
}
#header img {
        width: 420px;
        height: 105px;
        background-color: transparent;
        margin-top: 0px;
        padding-top: 0px;
}

#map {
        margin-top: 20px;
        margin-left: 50px;
        width: 700px;
        height: 600px;
        /* border: 2px solid black; */
        float:left;
        /* background: url(../images/oie_transparent.png);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; */
        
}
/* #map img {
        width: 700px;
        height: 450px;
        text-align: center;
} */

#players {
        margin-top: 20px;
        float: right;
        margin-right: 100px;
/*      color:rgb(149, 93, 19); */
        color: white;
        font-size: 25px;
        width: 350px;

}
.player {
        
width: 300px;
margin-right: 150px;
padding-left: 20px;
margin-top: 15px;
border: 6px rgb(149, 93, 19) outset;
background: rgba(0,0,0,0.6);
/* background: url(../images/bgText.jpg); */

-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;

-moz-box-shadow: inset 0px 0px 14px 0px #000000;
-webkit-box-shadow: inset 0px 0px 14px 0px #000000;
box-shadow: inset 0px 0px 14px 0px #000000;
}
.playerName:hover {
        color: rgb(149, 93, 19);
}
.playerName {
        text-align: center;
        font-size: 28;
        font-weight:bold; 
}

#question {
        
        height: 400px;
        width: 810px;
        margin-top: 8%;
        margin-left: 18%;
        background: rgba(0,0,0,0.6);
        background: url(../images/pergament.png)no-repeat; 
        /* -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; */
        /* border: 6px rgb(149, 93, 19) outset;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px; */

        /* -moz-box-shadow: inset 0px 0px 14px 0px #000000;
        -webkit-box-shadow: inset 0px 0px 14px 0px #000000;
        box-shadow: inset 0px 0px 14px 0px #000000; */
        

/* visibility: hidden; */
        
        
}
#bg {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        border: 2px solid black;
        margin: 0px;
        display: none;
}
#textQuestion {
        /* border: 2px solid black; */
        text-align: center;
        font-size: 25px;
        padding-top: 80px;
}
#answer {
        height: 30px;
        width: 250px;
        padding-top: 15px;
        padding-bottom: 0px;
        text-align: center;
        margin-left: 50px;
        margin-top: 25px;
        float: left;
        /* background: rgba(0,0,0,0.6); */
        border: 6px rgb(149, 93, 19) outset;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        -moz-box-shadow: inset 0px 0px 14px 0px #000000;
        -webkit-box-shadow: inset 0px 0px 14px 0px #000000;
        box-shadow: inset 0px 0px 14px 0px #000000;
        
}
#answer:hover {
        color: white;
}
#answers {
        margin-left: 70px;
        margin-top: 40px;
        /* border: 2px solid black; */
        height: 200px;
        width: 650px;
        /* background: white; */
        padding: 0px;
        
}
#wrapper{
        margin: 0 auto;
}
#logo{
        position:relative;
        top: 0.5em;
        left: 32%;
        right : 32%;
        width:34%;
        height:15%;
}

#playerInfo{
        float:left;
        width:20%;
        height : 23em;
        position:relative;
        top : 5em;
        left: 5%;
        border: 6px rgb(149, 93, 19) outset;
        background: rgba(0,0,0,0.6);
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        -moz-box-shadow: inset 0px 0px 14px 0px #000000;
        -webkit-box-shadow: inset 0px 0px 14px 0px #000000;
        box-shadow: inset 0px 0px 14px 0px #000000;
}

.titles{
        color : white;
        text-align: center;
        background: rgba(61,35,10,0.5);
        width : 90%;
        height : 30px;
        position: relative;
        left: 5%;
        right: 5%;
        top: 0.5em;
        border-radius : 50px;
        padding-top: 10px;
        padding-bottom:10px;
        
}
.pOpts{
        position: relative;
        left: 6%;
        top: 6%;
        color: white;
        text-decoration: none;
        font-size: large;
}
#rooms{
        float:right;
        border: 6px rgb(149, 93, 19) outset;
        background: rgba(0,0,0,0.6);
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        -moz-box-shadow: inset 0px 0px 14px 0px #000000;
        -webkit-box-shadow: inset 0px 0px 14px 0px #000000;
        box-shadow: inset 0px 0px 14px 0px #000000;
        width:30%;
        height : 23em;
        position:relative;
        top : 5em;
        right: 5%;
}
.opts{
        text-decoration: none;
        color: white;
        background:rgba(149, 93, 19, 0.3);
        border-radius:10px;
        
}
#options{
        padding: 10px 10px 10px 10px;
        position:relative;
        top: 100px;
        left:17%;
}
#createRoom{
        padding: 10px 55px 10px 55px;
        position: relative;
        top: 175px;
        left: 27%;
}
.opts:hover{
        background-color: #A38566;
        border-radius: 10px;
}
.opts:active{
        background:rgba(149, 93, 19, 0.3);
}
.r1 {
        color: white;
        font-size:large;
        text-align: left;
        margin-left: 50px;
}

#join{
        position:relative;
        left: 55%;
        background-color: #2E1F0F;
        color: lavender;
        border: 3px inset lavender;
        border-radius: 5px;
}
#footer{
        padding-top: 10px;
        width: 99.6%;
        height: 30px;
        float:left;
        margin-top: 12em;
        border-radius: 15px;
        border: 3px double rgb(103,61,15);
        background: -webkit-linear-gradient(#A37547, rgba(103,61,15,0.8));
        background: -o-linear-gradient( #A37547, rgba(103,61,15,0.8)); 
        background: -moz-linear-gradient(#A37547, rgba(103,61,15,0.8)); 
        background: linear-gradient(#A37547, rgba(103,61,15,0.8)); 
}
.footerLinks{
        margin-top: 200px;
        margin-left: 100px;
        color: white;
        text-decoration: none;
        padding:10px 50px 10px 50px;
}
.footerLinks:hover{
        background: -webkit-linear-gradient(#A37547, rgba(103,61,15,0.8));
        background: -o-linear-gradient( #A37547, rgba(103,61,15,0.8)); 
        background: -moz-linear-gradient(#A37547, rgba(103,61,15,0.8)); 
        background: linear-gradient(#A37547, rgba(103,61,15,0.8)); 
        border: 1px solid rgba(103,61,15,0.8);
}
#rankings{
        position:relative;
        left: 12%;
        top : 5em;
        right: 12%;
        float:left;
        width:20%;
        height : 23em;
        border: 6px rgb(149, 93, 19) outset;
        background: rgba(0,0,0,0.6);
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        -moz-box-shadow: inset 0px 0px 14px 0px #000000;
        -webkit-box-shadow: inset 0px 0px 14px 0px #000000;
        box-shadow: inset 0px 0px 14px 0px #000000;
}